<template>
    <el-row>
        <el-col :span="12" class="white-block">
            <p>默认的弹窗</p>
            <el-link type="primary" @click="visible=true">打开默认的弹窗</el-link>
            <dialog-msk :show.sync="visible" @cancel="visible = false"
                        @save="visible = false" :width="'50%'">
                <div>
                    自定义内容
                </div>
            </dialog-msk>
            <p class="mt20">自定义头尾的弹窗</p>
            <el-link type="primary" @click="visible1=true">打开自定义的弹窗</el-link>
            <dialog-msk :show.sync="visible1" ref="dialog" :center="true">
                <span slot="title" class="dialog-title">
                    <span slot="title">
                    自定义标题
                    </span>
                </span>
                <div slot="footer" class="right">
                    <el-button @click="close('dialog')" size="small">关闭</el-button>
                    <el-button type="primary" @click="visible1 = false" size="small">保存</el-button>
                </div>
                <div>
                    自定义内容
                </div>
            </dialog-msk>
        </el-col>
        <el-col :span="11" :offset="1" class="white-block">
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="参数名">
                </el-table-column>
                <el-table-column
                    prop="usage"
                    label="参数用法">
                </el-table-column>
                <el-table-column
                    prop="info"
                    label="参数说明">
                </el-table-column>
                <el-table-column
                    prop="choice"
                    label="可选值">
                </el-table-column>
                <el-table-column
                    prop="default"
                    label="默认值">
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</template>

<script>
    import dialogMsk from '../../components/dialog'

    export default {
        name: '',
        data() {
            return {
                tableData: [],
                visible: false,
                visible1: false,
                button: {
                    align: 'right',
                    ok: '保存',
                    cancel: '关闭'
                }
            }
        },
        mounted() {
            let tableData = [
                {
                    name: 'show',
                    usage: ':show.sync',
                    info: '是否打开弹框',
                    choice: '-',
                    default: '-'
                },
                {
                    name: 'title',
                    usage: ':title.sync',
                    info: '弹框标题',
                    choice: '-',
                    default: '提示'
                },
                {
                    name: 'width',
                    usage: ':width',
                    info: '弹框宽度',
                    choice: '-',
                    default: '30%'
                },
                {
                    name: 'center',
                    usage: ':center',
                    info: '是否对头部和底部采用居中布局',
                    choice: 'true/false',
                    default: 'false'
                },
                {
                    name: 'noEsc',
                    usage: ':noEsc',
                    info: '是否支持按Esc关闭弹框',
                    choice: 'true/false',
                    default: 'true'
                },
                {
                    name: 'noModal',
                    usage: ':noModal',
                    info: '是否支持点击空白处关闭弹框',
                    choice: 'true/false',
                    default: 'true'
                },
                {
                    name: 'cancel',
                    usage: '@cancel',
                    info: '取消事件，自定义底部内容时可不传',
                    choice: '-',
                    default: '-'
                },
                {
                    name: 'save',
                    usage: '@save',
                    info: '确定事件，自定义底部内容时可不传',
                    choice: '-',
                    default: '-'
                }
            ]
            this.tableData = tableData
        },
        methods: {
            save() {
            },
            close(obj) {
                this.visible1 = false
            }
        },
        components: {
            dialogMsk
        }
    }
</script>

<style scoped lang="less">

</style>
